<template>
  <div class="jaguar-view">
    <el-card class="jaguar-table">
      <el-table :data="tableData" v-loading="loading" table-layout="auto">
        <el-table-column prop="serverId" label="服务ID">
          <template #default="scope">
            <div style="min-width: 250px">
              {{ scope.row.serverId }}
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="serverName" label="服务名称">
          <template #default="scope">
            <div style="min-width: 150px">
              {{ scope.row.serverName }}
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="scopes" label="接口权限范围">
          <template #default="scope">
            <div style="min-width: 300px">
              <el-tag
                v-for="s in scope.row.scopes"
                :key="s"
                effect="plain"
                class="m-5"
              >
                {{ s }}
              </el-tag>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template #default="scope">
            <delete-button
              @confirm="
                ({ instance, done }) =>
                  handleDelete(scope.row, { instance, done })
              "
            />
          </template>
        </el-table-column>
      </el-table>
    </el-card>
  </div>
</template>
<script>
import { fetchList, del } from '@/api/upms/resourceServer'

export default {
  name: 'ResourceServer',
  data() {
    return {
      loading: false,
      tableData: [],
    }
  },
  mounted() {
    this.getData()
  },
  methods: {
    getData() {
      this.loading = true
      fetchList()
        .then((res) => {
          let data = res.data.data
          for (let i in data) {
            let scopes = data[i].scopes
            scopes.sort()
          }
          this.tableData = data
        })
        .finally(() => {
          this.loading = false
        })
    },
    handleDelete(row, { instance, done }) {
      del(row.serverId)
        .then(() => {
          done()
          this.$message.success('删除成功')
          this.getData()
        })
        .finally(() => {
          instance.confirmButtonLoading = false
        })
    },
  },
}
</script>
